import React, {Component} from 'react';

import {Button, Row, Col, Table, Pagination} from 'antd';
import {abnormal, excel} from "../value";
import app from '../AppMethod';
import moment from 'moment';
import {config} from "../config";
import {Consumer} from "../store";

class LackDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            pagination: {
                current: 0,
                total: 0,
                pagination: 0
            },
            searchData: {},
            allPage: 0,
            data: [],
            personData: {total_output: '', total_package: '', total_single: '', total_customer: ''},
        }
    };

    columns = [
        {
            title: '商品名',
            dataIndex: 'goods_name'
        },
        {
            title: '缺少的件数',
            dataIndex: 'abnormal_package'
        },
        {
            title: '缺少的散包数',
            dataIndex: 'abnormal_single'
        }
    ];

    render() {
        return (
            <div>
                <Row>

                    <Col span={2} className="colStyle">
                        总单数:{this.state.personData.total_output}
                    </Col>
                    <Col offset={1} span={2} className="colStyle">
                        总件数:{this.state.personData.total_package}
                    </Col>
                    <Col offset={1} span={2} className="colStyle">
                        总散数:{this.state.personData.total_single}
                    </Col>
                    <Col offset={1} span={2} className="colStyle">
                        客户数:{this.state.personData.total_customer}
                    </Col>
                </Row>
                <Row style={{marginTop: '20px'}}>
                    <Button type='primary' onClick={() => this.handleExport()}>导出Excel</Button>
                </Row>
                <Row style={{marginTop: '20px'}}>
                    <Table
                        columns={this.columns}
                        rowKey={(recored, index) => index}
                        loading={this.state.loading}
                        dataSource={this.state.data}
                        pagination={false}
                    >
                    </Table>
                </Row>
                <Row style={{marginTop: '20px'}}>
                    <Col span={12} style={{fontSize: '15px'}}>
                        共 {this.state.pagination.total} 条记录 第 {this.state.pagination.current} / {this.state.allPage}
                        页
                    </Col>
                    <Col span={12} style={{textAlign: 'right'}}>
                        <Pagination {...this.state.pagination} showSizeChanger={true} showQuickJumper={true}
                                    hideOnSinglePage={false}
                                    onChange={(page, pageSize) => this.handlePageChange(page, pageSize)}
                                    onShowSizeChange={(current, size) => this.handleSizeChange(current, size)}/>
                    </Col>
                </Row>
            </div>
        )
    };

    componentDidMount() {
        const {dispatch} = this.props;
        dispatch({menuType: "缺货详情"});
        this.handleSearchOrderList();
    };

    componentWillUnmount() {
        this.setState = (count, callback) => {
            return;
        }
    };

    /**
     * 获取缺货详情列表
     * @param data
     */
    handleSearchOrderList(data = {page: 1, size: 10}) {
        let abnormalData = app.getData("abnormalData");
        let time = abnormalData.abnormal_createtime;
        let abnormal_createtime_start = undefined;
        let abnormal_createtime_end = undefined;
        if (time != undefined && time.length > 0) {
            abnormal_createtime_start = moment(time[0]).format('YYYY-MM-DD');
            abnormal_createtime_end = moment(time[1]).format('YYYY-MM-DD');
        }
        let searchData = {
            abnormal_id: abnormalData.abnormal_id,
            output_num: abnormalData.output_num,
            customer_name: abnormalData.customer_name,
            abnormal_status: abnormalData.abnormal_status,
            abnormal_type: abnormalData.abnormal_type,
            abnormal_createtime_start: abnormal_createtime_start,
            abnormal_createtime_end: abnormal_createtime_end,
        };
        this.setState({loading: true, searchData});
        searchData.page = data.page;
        searchData.size = data.size;
        console.log(searchData);
        app.post(abnormal.SEARCH_ABNORMALDETAILLIST, searchData).then((result) => {
            if (result.code === 1) {
                let count = result.data.count;
                let pagination = {
                    current: data.page,
                    pageSize: data.size,
                    total: count
                };
                let allPage;
                if (count % data.size > 0) {
                    allPage = parseInt(count / data.size) + 1;
                } else {
                    allPage = count / data.size;
                }
                let orderData = result.data.dataSet;
                let personData = {};
                personData.total_output = result.data.total_output;
                personData.total_package = result.data.total_package;
                personData.total_single = result.data.total_single;
                personData.total_customer = result.data.total_customer;
                this.setState({allPage, pagination, data: orderData, loading: false, personData});
            } else {
                let pagination = {
                    current: 0,
                    pageSize: 0,
                    total: 0
                };
                let allPage = 0;
                this.setState({allPage, pagination, data: [], loading: false});
            }
        })
    };

    /**
     * 处理分页跳转事件
     * @param page
     * @param size
     */
    handlePageChange(page, size) {
        let abnormalData = this.state.searchData;
        abnormalData.page = page;
        abnormalData.size = size;
        this.handleSearchOrderList(abnormalData);
    };

    /**
     * 处理页数变化事件
     * @param current
     * @param size
     */
    handleSizeChange(current, size) {
        let abnormalData = this.state.searchData;
        abnormalData.page = current;
        abnormalData.size = size;
        this.handleSearchOrderList(abnormalData);
    };

    /**
     * 处理导出Excel事件
     */
    handleExport() {
        let abnormalData = app.getData("abnormalData");
        let time = abnormalData.abnormal_createtime;
        let abnormal_createtime_start = undefined;
        let abnormal_createtime_end = undefined;
        if (time != undefined && time.length > 0) {
            abnormal_createtime_start = moment(time[0]).format('YYYY-MM-DD');
            abnormal_createtime_end = moment(time[1]).format('YYYY-MM-DD');
        }
        let searchData = {
            abnormal_id: abnormalData.abnormal_id,
            output_num: abnormalData.output_num,
            customer_name: abnormalData.customer_name,
            abnormal_status: abnormalData.abnormal_status,
            abnormal_type: abnormalData.abnormal_type,
            abnormal_createtime_start: abnormal_createtime_start,
            abnormal_createtime_end: abnormal_createtime_end,
        };
        let params = app.getParams(searchData);
        if (params.length > 0) {
            window.location.href = config.serverUrl + excel.EXPORT_ABNORMALDETAIL + '?' + params;
        } else {
            window.location.href = config.serverUrl + excel.EXPORT_ABNORMALDETAIL;
        }
    }
};
export default prop => (
    <Consumer>
        {
            props => (
                <LackDetail {...prop} {...props}/>
            )
        }
    </Consumer>
);